<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Javascript i18n 国际化</title>
    <link href="./assets/css/base.css" rel="stylesheet" type="text/css">
    <link href="./assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <style>
    *{margin:0;padding:0;}
    html,body{width:100%;height:100%;font-size:12px;font-family:"tahoma","microsoft yahei";}
    input,textarea{appearance:none;-moz-appearance:none;-webkit-appearance:none;border-radius:0;}
    /* scrollbar */
    ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background-color:#fff;}
    ::-webkit-scrollbar{width:5px;height:5px; background-color:#fff;}
    ::-webkit-scrollbar-thumb{background-color:#265cb8;background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)}
    ::-moz-scrollbar-track{-moz-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background-color:#fff;}
    ::-moz-scrollbar{width:5px;background-color:#fff;}
    ::-moz-scrollbar-thumb{background-color:#265cb8;background-image:-moz-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)}
    .no-translation{color:red;}
    .translated{color:green;}
    header{position:relative;z-index:8;width:100%;height:90px;background-color:#0B3D92;color:#fff;background-image:url(./assets/img/top.jpg);background-repeat:no-repeat;}
    header h1{padding-left:150px;padding-top:20px;}
    header .left{float:left;}
    header .right{margin-top:15px;margin-right:20px;width:468px;height:60px;float:right;background-color:#fff;}
    footer{position:absolute;bottom:0;text-align:center;width:100%;height:30px;line-height:30px;bottom:0;background:#265cb8;color:#6c97e0;border-top:5px solid #528ae9;}
    nav{overflow:hidden;position:relative;width:100%;z-index:9;height:40px;line-height:40px;background-color:#2b5eb4;color:#fff;}
    nav div{margin-left:50px;}
    nav .left{float:left;}
    nav .left strong{color:#ffff00;}
    nav .right{color:#769ad6;margin-right:20px;float:right;}
    nav div a{color:#fff;text-decoration:none;margin:0 10px;}
    nav div a:hover{color:#FFFF00;}
    nav div a.current{color:#fff;}
    .filter{background-color:#f7f7f7;border-bottom:1px solid #eee;}
    .filter .search{overflow:hidden;padding:10px 20px;}
    .filter .search .left{float:left;}
    .filter .search .right{float:right;}
    .filter .search select{padding:0 5px;height:25px;line-height:25px;border:1px solid #000;vertical-align:middle;}
    .filter .search input[type="text"]{padding:0 5px;height:23px;line-height:23px;border:1px solid #000;vertical-align:middle;}
    .filter .search input[type="button"]{padding:0 10px;height:25px;line-height:25px;margin-left:5px;border:1px solid #000;vertical-align:middle;}
    .filter .search .get-all{color:#000;font-size:14px;text-decoration:none;vertical-align:middle;}
    .admin{display:none;position:fixed;z-index:9;top:0;left:0;width:100%;height:100%;color:#fff;}
    .admin dd{ padding: 10px; background: #fff; color: #000;}
    .admin dd ul{display: block; padding: 10px; height: 500px; overflow-y: scroll;}
    .admin dd ul li{ padding: 10px 0; border-bottom: 1px solid #ccc;}
    .admin dd input{ padding: 2px; border: 1px solid #ccc;vertical-align: middle;}
    .admin dd input[type="button"]{ padding: 2px 5px;background: #265cb8; color: #fff; border: 0;vertical-align: middle;}
    .admin dd a{vertical-align: middle;margin-left: 10px;text-decoration: none;color: #265cb8;}
    .admin dd span{vertical-align: middle; margin-left: 20px;}
    .admin .close{text-decoration: none;float:right;color:#265cb8;font-size:20px;}
    .admin .text{position:fixed;top:100px;left:100px;right:100px;bottom:100px;margin:auto auto;z-index:10;}
    .admin .text dt{font-size:20px;padding:5px 0;}
    .admin .text textarea{width:100%;min-height:400px;border:10px solid #fff;overflow-y:scroll;}
    .admin .import-button{font-size:16px;border:1px solid #000;padding:5px 10px;}
    .admin .background{position:fixed;z-index:8;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0.8;}
    .website{display:none;position:fixed;z-index:9;top:0;left:0;width:100%;height:100%;margin-top:50px;color:#fff;}
    .website dd{ padding: 10px; background: #fff; color: #000;}
    .website dd ul{display: block; padding: 10px; height: 500px; overflow-y: scroll;}
    .website dd ul li{ padding: 10px 0; border-bottom: 1px solid #ccc;}
    .website dd ul li .handle { float: right;}
    .website dd ul li .handle a { font-size: 14px; }
    .website dd ul li .handle .delete-button { text-decoration: none; color: #000;}
    .website dd ul li .handle .edit-button { text-decoration: none; color: #000;}
    .website dd ul li input{ padding: 2px 5px; border: 1px solid #ccc;}
    .website .close{text-decoration: none;float:right;color:#265cb8;font-size:20px;}
    .website .text{position:relative;width:80%;margin:auto auto;z-index:10;}
    .website .text dt{font-size:20px;padding:5px 0;}
    .website .text textarea{width:100%;min-height:400px;border:10px solid #fff;overflow-y:scroll;}
    .website .import-button{font-size:16px;border:1px solid #000;padding:5px 10px;}
    .website .background{position:fixed;z-index:8;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0.8;}
    .language-manage{display:none;position:fixed;z-index:9;top:0;left:0;width:100%;height:100%;margin-top:50px;color:#fff;}
    .language-manage dd{ padding: 10px; background: #fff; color: #000;}
    .language-manage dd ul{display: block; padding: 10px; height: 500px; overflow-y: scroll;}
    .language-manage dd ul li{ padding: 10px 0; border-bottom: 1px solid #ccc;}
    .language-manage dd ul li .handle { float: right;}
    .language-manage dd ul li .handle a { font-size: 14px; }
    .language-manage dd ul li .handle .delete-button { text-decoration: none; color: #000;}
    .language-manage dd ul li .handle .edit-button { text-decoration: none; color: #000;}
    .language-manage dd.add { border-bottom: 1px solid #ccc; }
    .language-manage dd input{ padding: 3px 5px; border: 1px solid #ccc; vertical-align: middle;}
    .language-manage dd input[type="button"] { padding: 2px 5px; border: 1px solid #ccc; vertical-align: middle; }
    .language-manage .close{text-decoration: none;float:right;color:#265cb8;font-size:20px;}
    .language-manage .text{position:relative;width:80%;margin:auto auto;z-index:10;}
    .language-manage .text dt{font-size:20px;padding:5px 0;}
    .language-manage .text textarea{width:100%;min-height:400px;border:10px solid #fff;overflow-y:scroll;}
    .language-manage .import-button{font-size:16px;border:1px solid #000;padding:5px 10px;}
    .language-manage .background{position:fixed;z-index:8;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0.8;}
    .content{margin:0 auto;}
    .content .import{display:none;position:fixed;z-index:9;top:0;left:0;width:100%;height:100%;margin-top:50px;color:#fff;}
    .content .import .close{float:right;color:#265cb8;font-size:20px;text-decoration: none;}
    .content .import .text{position:relative;width:80%;margin:auto auto;z-index:10;}
    .content .import .text dt{font-size:20px;padding:5px 0;}
    .content .import .text textarea{width:100%;min-height:400px;border:10px solid #fff;overflow-y:scroll;}
    .content .import .import-button{font-size:16px;border:1px solid #000;padding:5px 10px;}
    .content .import .background{position:fixed;z-index:8;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0.8;}
    .content .export{display:none;position:fixed;z-index:9;top:0;left:0;width:100%;height:100%;margin-top:50px;color:#fff;}
    .content .export .close{float:right;color:#265cb8;font-size:20px;text-decoration: none;}
    .content .export .text{position:relative;width:80%;margin:auto auto;z-index:10;}
    .content .export .text a {text-decoration:none;}
    .content .export .text a:hover {text-decoration:underline;}
    .content .export .text .format-json{color:#00CCFF;font-size:14px;}
    .content .export .text .export-apps{display: inline-block; color:#999;font-size:14px;}
    .content .export .text .export-apps a{color:#00CCFF;font-size:14px;}
    .content .export .text .download{color:#ffff00;font-size:14px;}
    .content .export .text dt{font-size:20px;padding:5px 0;}
    .content .export .text textarea{width:100%;min-height:400px;border:10px solid #fff;overflow-y:scroll;}
    .content .export .text .gen-language {padding: 3px 0;}
    .content .export .text .language-text {padding: 0 5px;height: 23px;line-height: 23px;border: 1px solid #000;vertical-align: middle;}
    .content .export .text .gen-language-index {padding: 0 10px;height: 25px;line-height: 25px;margin-left: 5px;border: 1px solid #000;vertical-align: middle;}
    .content .export .text .language-index { margin-left: 10px; font-size: 14px;}
    .content .export .background{position:fixed;z-index:8;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0.8;}
    .content .edit{display:none;position:fixed;z-index:9;top:0;left:0;width:100%;height:100%;margin-top:50px;color:#fff;}
    .content .edit .text{position:relative;width:80%;margin:auto auto;z-index:10;}
    .content .edit .text dt{font-size:16px;padding:5px 0;}
    .content .edit .text dt .close{float:right;color:#265cb8;font-size:20px;text-decoration: none;}
    .content .edit .text .page{color:#eee;}
    .content .edit .text textarea{border:10px solid #fff;width:100%;min-height:400px;opacity:0.9;overflow-y:scroll;background-color:#fff;}
    .content .edit .background{position:fixed;z-index:8;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0.8;}
    .content .edit .text .left{float:left;}
    .content .edit .text .right{float:right;}
    .content .list{position:absolute;top:180px;bottom:70px;left:0;right:0;margin:0 auto;padding:20px;overflow-y:scroll;}
    .content .list .row{overflow:hidden;border:2px solid #fff;}
    .content .list .row:hover{background:#f8f8f8;border:2px solid #f4f4f4;}
    .content .list dl{float:left; padding:0 10px 10px 10px;}
    .content .list dl.width{width: 200px;}
    .content .list dl:hover{background:#f2f2f2;}
    .content .list dl dt{height:20px;line-height:20px;font-weight:bold;padding:3px 0;}
    .content .list dl dt .edit-button{color:#9699a3;}
    .content .list dl dt .delete-button{color:#91a2d9;}
    .content .list dl dt .preview-button{color:#9699a3;margin-right:10px;}
    .content .list dl dt a{height:20px;line-height:20px;float:right; margin-left:5px; color:#000;text-decoration:none;}
    .content .list dl dt .status{font-weight:normal;color:#999;}
    .content .list dl dt strong { cursor: pointer;}
    .content .list textarea{width:100%;padding:5px;font-size:12px;vertical-align:top;border:1px solid #c2c6d4;background-color:#fff;color:#999;}
    .content .pagination{position:absolute;border-top:1px solid #eee;bottom:35px;width:100%;margin:0 auto;text-align:center;font-size:12px;color:#343434;}
    .content .pagination a{display:inline-block;color:#343434;font-size:14px;text-decoration:none;padding:3px 5px;}
    .content .pagination a:hover{color:#000;font-weight:bold;}
    .content .pagination .current{font-weight:bold;font-size:18px;border:0;color:#000;}
    .content .filter .right i { cursor: pointer;}
    .login {
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding-top: 200px;
    }
    .login .form {
      position: relative;
      z-index: 99;
      width: 400px;
      margin: 0 auto;
      padding: 20px;
      background: rgba(255,255,255,0.8);
      border: 5px solid #eee;
    }
    .login .form dl dt {
      font-size: 14px;
    }
    .login .form dl dt,.login .form dl dd {
      margin-bottom: 10px;
    }
    .login .form input[type="text"],.login .form input[type="password"] {
      padding: 5px;
      border: 1px solid #999;
    }
    .login .form input[type="button"] {
      border: 1px solid #999;
      padding: 2px 10px;
    }
    .login .background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #000;
      opacity: 0.8;
    }
    </style>
    <script src="../mi18n.js" type="module"></script>
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/index.js"></script>
    <script src="./assets/js/translate.js"></script>
    <script id="moneyQrCodeScript" src="/qrcode.js" data-set-config='{"bottom":"20px", "right":"20px", "close":"true", "countdown":"300", "imgSrc":"/qrcode.png", "title":"扫码赞助!"}'></script>
    <script>
    </script>
  </head>
  <body>
    <div id="login-box" class="login">
      <div class="form">
        <dl>
          <dt>管理员登录</dt>
          <dd><input type="text" name="username" placeholder="用户名" /></dd>
          <dd><input type="password" name="password" placeholder="密码" /></dd>
          <dd class="result"></dd>
          <dd><input type="button" class="login-button" value="登录" /> <a href="#none">忘记密码</a>&nbsp;&nbsp;&nbsp;&nbsp;演示版，用户名:admin&nbsp;&nbsp;密码:123123123</dd>
        </dl>
      </div>
      <div class="background"></div>
    </div>
    <header>
      <div class="left">
        <h1>Javascript Mi18n 国际化</h1>
      </div>
      <div class="right">
        <!--
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid"
          data-ad-client="ca-pub-8655751684012545" data-ad-slot="1324157982"></ins>
        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
        -->
      </div>
    </header>
    <nav>
      <div class="left">
        <span>总共：<strong class="total-row"></strong>/条翻译文本</span>&nbsp;.&nbsp;
        <a href="#none" class="nav-delete-all"><i class="fa fa-times" aria-hidden="true"></i> 清空</a>&nbsp;.&nbsp;
        <a href="#none" class="nav-export"><i class="fa fa-cloud-download" aria-hidden="true"></i> 导出</a>&nbsp;.&nbsp;
        <a href="#none" class="nav-import"><i class="fa fa-cloud-upload" aria-hidden="true"></i> 导入</a>&nbsp;.&nbsp;
        <a href="#none" class="nav-admin"><i class="fa fa-user-circle" aria-hidden="true"></i> 管理员</a>&nbsp;.&nbsp;
        <a href="#none" class="nav-website"><i class="fa fa-list" aria-hidden="true"></i> 网站</a>&nbsp;.&nbsp;
        <a href="#none" class="nav-language"><i class="fa fa-language" aria-hidden="true"></i> 语种</a>&nbsp;.&nbsp;
        <a href="../" class="nav-document" target="_blank"><i class="fa fa-file-text" aria-hidden="true"></i> 开发文档</a>&nbsp;.&nbsp;
        <a class="logout-button" href="#none">退出</a>
      </div>
      <div class="right">此演示管理平台禁止删除、修改数据，仅仅提供演示！许多功能任然尚在开发中......</div>
    </nav>
    <div class="admin">
      <div class="text">
        <dl>
          <dt>管理员<a href="#none" class="close">×</a></dt>
          <dd><ul></ul></dd>
          <dd class="add-admin-box"><input type="text" name="username" placeholder="用户名" />&nbsp;<input type="password" name="password" placeholder="密码" />&nbsp;<input type="password" name="repassword" placeholder="确认密码" />&nbsp;<input type="button" value="增加管理员" />&nbsp;<span class="result"></span></dd>
        </dl>
      </div>
      <div class="background"></div>
    </div>
    <div class="website">
      <div class="text">
        <dl>
          <dt>网站列表<a href="#none" class="close">×</a></dt>
          <dd>网站列表，主要用于对翻译内容进行分类，以便不同的管理员对内容进行翻译。</dd>
          <dd><ul></ul></dd>
        </dl>
      </div>
      <div class="background"></div>
    </div>
    <div class="language-manage">
      <div class="text">
        <dl>
          <dt>语种列表<a href="#none" class="close">×</a></dt>
          <dd class="add">索引：<input type="text" name="index" /> 语种：<input type="text" name="name" /> <input type="button" class="add-button" value="增加" />&nbsp;<span class="status"></span></dd>
          <dd><ul></ul></dd>
        </dl>
      </div>
      <div class="background"></div>
    </div>
    <div class="content">
      <div class="filter">
        <div class="search">
          <div class="left">
            <select class="search-field"></select>
            <select class="search-website">
              <option value="all">全部</option>
            </select>
            <input class="search-sc" type="text" />
            <input type="button" value="搜索" />
            <a href="#none" class="get-all">全部</a>
            <div class="language"></div>
          </div>
          <div class="right">
            <i class="all fa fa-circle-o" aria-hidden="true"> 所有</i>&nbsp;&nbsp;.&nbsp;&nbsp;
            <i class="no-translation fa fa-times" aria-hidden="true"> 未翻译</i>&nbsp;&nbsp;.&nbsp;&nbsp;
            <i class="translated fa fa-check-circle" aria-hidden="true"> 已翻译</i>
            <!--
            翻译：
            <input type="text" />
            <select class="field"></select>
            <select class="field"></select>
            <input type="button" value="翻译" />
            -->
          </div>
        </div>
      </div>
      <div class="import">
        <div class="text">
          <dl>
            <dt>导入翻译列表数据<a href="#none" class="close">×</a></dt>
            <dd>
              <textarea></textarea>
            </dd>
            <dd><input type="button" class="import-button" value="导入"></dd>
          </dl>
        </div>
        <div class="background"></div>
      </div>
      <div class="export">
        <div class="text">
          <dl>
            <dt>导出翻译列表数据&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="format-json">导出 JSON 格式</a>&nbsp;.&nbsp;<div class="export-apps">导出（<span class="format-text"></span>）列表格式</div>&nbsp;.&nbsp;<a href="./api.php?action=downloadMi18n" target="_blank" class="download">下载</a><a href="#none" class="close">×</a></dt>
            <dd>
              <textarea></textarea>
            </dd>
            <dd class="gen-language">创建索引：<input class="language-text" type="text"><input type="button" class="gen-language-index" value="创建索引" /><span class="language-index"></span></dd>
          </dl>
        </div>
        <div class="background"></div>
      </div>
      <div class="edit">
        <div class="text">
          <dl>
            <dt><strong>索引</strong>:<span class="index"></span> . <strong>语言</strong>:<span class="language"></span><a href="#none" class="close">×</a></dt>
            <dd>
              <textarea></textarea>
            </dd>
            <dd>
              <div class="left"><strong>所属网站</strong>:<a href="#none" target="_blank" class="website"></a> . <strong>所属页面</strong>:<a href="#none" target="_blank" class="page"></a></div>
              <div class="right"><strong>创建</strong>:<span class="created-datetime"></span> . <strong>最后更新</strong>:<span
                  class="last-update-datetime"></span></div>
            </dd>
          </dl>
        </div>
        <div class="background"></div>
      </div>
      <div class="list"></div>
      <div class="pagination">
        <dl id="pagination">
          <dd>
            <a href="#none" class="begin">‹‹</a>
            <a href="#none" class="previous">‹</a>
            <span class="page-list"></span>
            <a href="#none" class="next">›</a>
            <a href="#none" class="end">››</a>
            共: <strong class="total-page">-</strong>/页
            共: <strong class="total-row">-</strong>/行
          </dd>
        </dl>
      </div>
    </div>
    <footer>
      <div class="left">版权所有：520internet.com</div>
      <div class="right"></div>
    </footer>
  </body>
</html>
